<template>
  <div>

    <div class="row">
        <div class="col-md-12">
          <!-- BEGIN EXAMPLE TABLE PORTLET-->
          <div class="portlet box grey-cascade">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-globe"></i>数据管理
              </div>
              <!--
              <div class="tools">
                <a href="javascript:;" class="collapse">
                </a>
                <a href="#portlet-config" data-toggle="modal" class="config">
                </a>
                <a href="javascript:;" class="reload">
                </a>
                <a href="javascript:;" class="remove">
                </a>
              </div> -->
              <div  style="float: right;width: 256px;position: relative;top: 3px;left: 5px;">

                <button id="sample_editable_1_new" class="btn green" data-toggle="modal" href="#responsive">新增 <i class="fa fa-plus"></i></button>
                <button id="sample_editable_1_new" class="btn red" data-toggle="modal"  @click="allDelete()">批量删除 <i class="fa fa-trash-o"></i>
                

                </button>
                <div class="btn-group pull-right ">
                      <button class="btn dropdown-toggle" data-toggle="dropdown">工具 <i class="fa fa-angle-down"></i>
                      </button>
                      <ul class="dropdown-menu pull-right style">
                        <li>
                          <a href="javascript:;">
                          打印 </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                          另存为PDF </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                          导出为Excel </a>
                        </li>
                      </ul>
                    </div>
              </div>

            </div>
            <div class="portlet-body">
            
              <table class="table table-striped table-bordered table-hover" style="color: #333;font-weight: 500;" id="sample_3">
                <thead>
                  <tr>
                    <th class="table-checkbox">
                      <input type="checkbox" class="group-checkable" data-set="#sample_3 .checkboxes"/> 全选
                    </th>
                    <th>
                       序号
                    </th>
                    <th>
                       设备房编号
                    </th>
                    <th>
                       设备房名称
                    </th>
                    <th>
                       地址
                    </th>
                    <th>
                       所属小区
                    </th>
                  
                    <th>
                       设备数量
                    </th>
                    <th>
                       设备房状态
                    </th>
                     <th>
                       功能操作
                    </th>
                  </tr>
                </thead>
                <tbody>
                <tr class="odd gradeX" v-for="(item,index) in list">
                  <td>
                    <input type="checkbox" class="checkboxes" value="1" @click="checkT(item,index)"/>
                  </td>
                  <td>
                     {{item.number}}
                  </td>
                  <td>
                    {{item.bh}}
                  </td>
                  <td>
                     {{item.mc}}
                  </td>
                  <td class="center">
                     {{item.address}}
                  </td>
                 <td>
                     {{item.xq}}
                  </td>
                  <td>
                    {{item.sb}}
                  </td>
                  <td v-if="item.type==1">
                     启用
                  </td>
                  <td v-if="item.type==0">
                     停用
                  </td>
                  <td>
                    <a style="color:#5b9bd1" class="infor">详情</a> |
                    <a style="color:#5b9bd1" class="edit">编辑</a> |
                    <a style="color:#5b9bd1" class="delete" @click="deleteData(index,item,$event)">删除</a>
                  </td>
                </tr>
              
                </tbody>
              </table>
              <!-- responsive -->
              <div id="responsive" class="modal fade" tabindex="-1" data-width="760">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                  <h4 class="modal-title">新增员工</h4>
                </div>
                <div class="modal-body">
                  <div class="row">
                    <div class="col-md-offset-3 col-md-6">

                      <p>
                        <span></span>
                        <input class="form-control" placeholder="请输入员工姓名" type="text">
                      </p>
                      <p>
                        <input class="form-control" placeholder="请输入员工邮箱" type="text">
                      </p>
                      <p>
                        <input class="form-control" placeholder="请输入员工次数" type="text">
                      </p>
                    </div>

                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
                  <button type="button" class="btn blue">保存</button>
                </div>
              </div>
              <!-- stackable -->
              
              <!-- 确定删除弹框开始 -->
             
              
                <div class="modal-scrollable" v-show="showDailog" style="z-index: 10051;">
                <transition name="vux-fade">
                  <div data-v-02ac32bc="" id="sureDelete" tabindex="-1" data-width="760" class="modal" aria-hidden="false" style="display: block; width: 760px; margin-left: -379px; margin-top: -59.5px;">
                    <div data-v-02ac32bc="" class="modal-header" style="border-bottom: 0px;">
                      <button data-v-02ac32bc="" type="button" data-dismiss="modal" aria-hidden="true" class="close"></button>
                     <h4 data-v-02ac32bc="" class="modal-title">确定删除?</h4>
                     </div> 
                     <div data-v-02ac32bc="" class="modal-footer">
                       <button data-v-02ac32bc="" type="button" @click="cancelDelete()" class="btn btn-default">取消</button>
                        <button data-v-02ac32bc="" type="button" @click="sureDelete($event)" class="btn blue">确定</button>
                      </div>
                    </div>
                     </transition>
                  </div>
                  <div class="modal-backdrop" v-show="showDailog" style="z-index: 10050;"></div>
                
              <!-- 确定删除弹框结束 -->

            </div>
          </div>
          <!-- END EXAMPLE TABLE PORTLET-->
        </div>
      </div>

  </div>

</template>  

<style scoped>
  /*//@import '../../../static/plugins/swiper/dist/css/swiper.min.css';
  //.slider{min-height: 229px;}*/

  p {margin: 0 0 10px;}

.vux-fade-enter-active,.vux-fade-leave-active {
    opacity: 1;
    transition: opacity linear 0.2s
  }

  .vux-fade-enter, .vux-fade-leave-to {
    opacity: 0;
  }

  .vux-dialog-enter-active,.vux-dialog-leave-active {
    opacity: 1;
    transition-duration: 400ms;
    transform: translate(-50%, -50%) scale(1)!important;
    transition-property: transform, opacity!important;
  }

  .vux-dialog-enter, .vux-dialog-leave-active {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.185)!important;
  }

  .vux-mask-enter, .vux-mask-leave-active {
    opacity: 0;
  }
  .vux-mask-leave-active, .vux-mask-enter-active {
    transition: opacity 300ms;
  }

</style>

<script>
  import '../../../../static/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js';
  import '../../../../static/global/plugins/bootstrap-modal/js/bootstrap-modal.js';

//   import '../../../static/global/plugins/bootstrap-daterangepicker/moment.min.js';
//   import '../../../static/global/plugins/bootstrap-daterangepicker/daterangepicker.js';
//   import '../../../static/global/plugins/fullcalendar/fullcalendar.js';

  import '../../../../static/global/plugins/jquery-multi-select/js/jquery.multi-select.js';

  import '../../../../static/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js';
  import '../../../../static/global/plugins/bootstrap-select/bootstrap-select.js';
  import '../../../../static/global/plugins/select2/select2.min.js';
  import '../../../../static/global/plugins/datatables/media/js/jquery.dataTables.js';
  import '../../../../static/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js';
  //highcharts插件
  import '../../../../static/global/plugins/highcharts.js';

  import Metronic from '../../../../static/global/js/metronic.js'

  import '../../../../static/js/layout/quick-sidebar.js';
  import '../../../../static/js/layout/demo.js';
  import '../../../../static/js/pages/index.js';
  import '../../../../static/js/pages/tasks.js';

  import '../../../../static/js/pages/table-managed.js';
  import '../../../../static/js/pages/components-pickers.js';
  import '../../../../static/js/pages/components-dropdowns.js';
  import '../../../../static/js/pages/ui-extended-modals.js';

  import Headers from '../../../components/Headers.vue';
  import Bars from '../../../components/Bars.vue';
  import Foot from '../../../components/Foot.vue';
   
  import optVue from '../../../config/optVue.js';
  import {setStore,getStore,removeStore} from '../../../config/common.js';
  export default {
     data(){
      return{
        list:[],
        data:null,
        dataId:null,
        index:null,
        title:"",
        showDailog:false
      }
    },
    components: {
        Headers,Bars,Foot
    },
    mounted(){
      document.title = '设备房管理';
      this.title = document.title
      $(".backstretch").remove();
      $(".page-content").height("895px");
      optVue.sbfgl(this);
      $(".page-sidebar-menu>li").eq(getStore("num")+1).addClass("open");
      $(function(){
        var element = $(".page-sidebar-menu>li").eq(parseInt(getStore("num"))+1);
        element.addClass("open");
        element.children(".sub-menu").css({"display":"block"});
        var childElement = element.children(".sub-menu").children("li").eq(parseInt(getStore("childNum")));
        console.log(parseInt(getStore("childNum")));
        childElement.addClass("open");
        childElement.children(".sub-menu").css({"display":"block"});
      })
    },
    methods:{
      deleteData:function (index,data,event) {
        this.data = data;
        this.index = index;
        this.showDailog = true;
        
      },
      sureDelete:function(event){
         this.showDailog = false;  
         this.list.splice(this.index, 1);
       //optVue.sbfgl(this);
      },
      cancelDelete:function(){
        this.showDailog = false;
      },
      allDelete:function(event){
        console.log($(".checkboxes").is(':checked'))
       if($(".checkboxes").is(':checked')){
          this.showDailog = true;
        }
       },
      checkT:function(data,index){
        console.log(data)
        console.log(index)
      }
    }


  }

</script>  



